<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #f00;
            transition: 1s ease;
            transform: translateX(0px);
        }
    </style>
</head>
<body>
    <div class="box"></div>


    <button>开始</button>

    <script>

        // document.querySelector('button').addEventListener('click', function () {
        //     animate('.box', {
        //         transform: 'translateX(500px)',
        //         width: '200px',
        //     }, () => {
        //         console.log('hello world');
        //     });
        // });

        // function animate (selector, cssObj, callback) {
        //     const box = document.querySelector(selector);
        //     // Object.keys(cssObj): ['transform', 'width']
        //     // Object.keys(cssObj).map(): ['transform: translateX(500px);', 'width: 200px;']
        //     // Object.keys(cssObj).map(key => `${key}: ${cssObj[key]};`).join(''): 'transform: translateX(500px);width: 200px;'
        //     box.setAttribute('style', Object.keys(cssObj).map(key => `${key}: ${cssObj[key]};`).join(''));
        //     setTimeout(() => {
        //         callback && callback();
        //     }, 1000);
        // }

        // function fn (cb1, cb2) {
        //     setTimeout(() => {
        //         const a = Math.random();
        //         cb1(a);
        //     }, 1000);
        //     setTimeout(() => {
        //         const b = Math.random();
        //         cb2(b);
        //     }, 2000);
        // }

        // // 全局作用域下得到a的值
        // // 全局作用域下 不知道a和b的值  所以用回调函数解决这个问题
        // fn(
        //     (x) => {
        //         const res = x + 1;
        //         console.log(res);
        //     },
        //     (x) => {
        //         console.log('b:', x);
        //     },
        // );

        // 回调函数
        // 在函数内部 运行外部逻辑(传内部变量给外部逻辑)
        // function fn (cb) {
        //     const arr = [];
        //     setInterval(() => {
        //         arr.push(arr.length);
        //         cb && cb(arr);
        //     }, 1000);
        // }

        // 0. 请用回调函数的方式 每秒打印一次arr
        // fn((arr) => {
        //     console.log(arr);
        // });

        // 1. 请用回调函数的方式 每秒打印一次arr的数字之和
        // fn((arr) => {
        //     console.log(arr.reduce((prev, current) => prev + current));
        // });

        // 2. 请用回调函数的方式 每秒打印一次arr的数字之平均值
        // fn((arr) => {
        //     console.log(arr.reduce((prev, current) => prev + current) / arr.length);
        // });

        // 3. 请用回调函数的方式 求第5秒时 arr的数字之和
        // fn((arr) => {
        //     if (arr.length === 5) {
        //         console.log(arr.reduce((prev, current) => prev + current));
        //     }
        // });

        // 回调函数:
        // 你在你家(本来的函数) 门口放了10块钱(给回调函数传的变量) 并且开了个门(形参)
        // 进来一个人(回调函数) 拿走了10块钱 并且买了包辣条(外部逻辑)/去洗脚城(另一个外部逻辑)

        // setInterval(() => {

        // }, 1000);

        // setTimeout(() => {

        // }, 1000);

        // document.addEventListener('click', (e) => {

        // });

        const arr = [1, 2, 3];

        // arr.map((item) => item ** 2);

        // mapper: (item) => item ** 2
        Array.prototype.myMap = function (mapper) {
            const res = [];
            for (const item of this) {
                const newItem = mapper(item);
                res.push(newItem);
            }
            return res;
        };

        // console.log(arr.myMap((item) => item ** 2));

        Array.prototype.myFind = function (getCondition) {
            for (const item of this) {
                // 用回调函数得到 当前数组项是否满足条件
                const condition = getCondition(item);
                // 如果找到了 返回当前数组项
                if (condition) {
                    return item;
                }
            }
            return undefined;
        };

        console.log(arr.myFind(item => item % 2 === 0)); // 2

        // myFindIndex
        Array.prototype.myFindIndex = function (getCondition) {
            for (let i = 0; i < this.length; i++) {
                const 找到了 = getCondition(this[i]);
                if (找到了) {
                    return i;
                }
            }
            return -1;
        };

        // mySome
        Array.prototype.mySome = function (getCondition) {
            for (const item of this) {
                const 找到了 = getCondition(item);
                if (找到了) {
                    return true;
                }
            }
            return false;
        };

        //


    </script>
</body>
</html>